<template>
  <el-container>
    <el-header>
      <div class="boxHeader">
        <h3>苏超的个人博客页面</h3>
      </div>
    </el-header>
    <el-container>
      <el-aside width="1000px">
        <div class="leftContent" v-show="!flag">
          <div class="items">
            <span class="item">博客编号：{{article.id}}</span>
            <span class="item">作者：{{article.username}}</span>
            <span class="item">博客更新时间：{{article.time}}</span>
            <el-button type="primary" @click="onDeleteArticle(article)">删除</el-button>
          </div>
          <div class="context">
            <div class="contextHeader">博客内容：</div>
            <div class="contextBody">
              {{article.content}}
            </div>
          </div>
        </div>
        <div class="leftContent" v-for="(item,index) in Articles" :key="index" v-show="flag">
          <div class="items">
            <span class="item">博客编号：{{item.id}}</span>
            <span class="item">作者：{{item.username}}</span>
            <span class="item">博客更新时间：{{item.time}}</span>
            <el-button type="primary" @click="onDeleteArticle(item)">删除</el-button>
          </div>
          <div class="context">
            <div class="contextHeader">博客内容：</div>
            <div class="contextBody">
              {{item.content}}
            </div>
          </div>
        </div>
      </el-aside>
      <el-main>
        <div class="rightContent">
        <el-form ref="form" :model="form" label-width="80px">
          <div><h3>发表一篇新博客</h3></div>
          <el-form-item label="博客内容">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即发表</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
        <div class="rightContent" style="background-color: #39d3ee; margin-top: 20px">
          <el-form ref="list" :model="list" label-width="80px">
            <div><h3>查找博客通过博客编号</h3></div>
            <el-form-item label="博客编号">
              <el-input type="textarea" v-model="list.id"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSecondSubmit" >立即查找</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {deleteArticleById, fetchAllArticles, selectArticleById, submitArticle} from "@/api/article";

export default {
  name: 'Article',
  props:{

  },
  data() {
    return {
      flag: false,
      username:'苏超',
      Articles:[],
      form: {
          username:'',
          content:'',
          time: new Date()
      },
      list: {
        id:''
      },
      article: {
        id: '',
        username:'',
        content:'',
        time: new Date()
      }
    }
  },
  created() {
    this.getAllArticles()
  },
  methods:{
    getAllArticles(){
      fetchAllArticles(this.username).then((res) => {
        res = res.data
        console.log(res)
        this.Articles = res.Articles
        this.flag = true
        console.log(this.Articles)
      }).catch(() => {
        alert('接口请求失败');
        this.flag = true
      })
    },
    onSubmit(){
      this.form.username = this.username
      submitArticle(this.form).then(() => {
        this.flag = false
        alert('发布成功');
        this.getAllArticles()
      }).catch(() => {
        alert('接口请求失败');
        this.flag = true
      })
    },
    onSecondSubmit(){
      this.flag = false
      selectArticleById(this.list.id).then((res) =>{
        res = res.data
        this.article = res.Article
        this.flag = false
        alert('查询成功')
      }).catch(() => {
        alert('接口请求失败');
        this.flag = true
      })
    },
    onDeleteArticle(item) {
      deleteArticleById(item.id).then(() => {
        alert("删除成功");
        this.getAllArticles();
      })
    }
  }
}
</script>

<style scoped>

.leftContent {
  border-radius: 20px;
  margin: 20px;
  background: rgba(147, 65, 65, 0.2);
}
.rightContent {
    display: flex;
    justify-content: center;
    background: #fcce38;
  border-radius: 20px;
}
.items{
  padding-top: 20px;
}
.item{
  color: #fd6e78;
  padding-left: 20px;
  padding-right: 40px;
}
.context{
  padding: 20px;
}
.contextHeader {
  text-align: left;
}
.contextBody {
  text-align: center;
  color: #2293f6;
}
</style>
